<template>
  <div>
    <el-dialog width="600px" :close-on-click-modal="false" title="取消订单" :visible.sync="isShowOilConfirm" center @closed="isShowOilConfirm = false">
      <el-form :model="formCancel" :rules="rules" ref="formCancel">
        <el-form-item label="订单号：" prop="userName" :label-width="formLabelWidth">{{form.orderNo}}</el-form-item>
        <el-form-item label="预约时间：" :label-width="formLabelWidth">{{form.deliveryDt}}</el-form-item>
        <el-form-item label="预约电话：" :label-width="formLabelWidth">{{ form.customerPhone | hidePhoneFourRank }} </el-form-item>
        <el-form-item label="预约数量：" :label-width="formLabelWidth">{{form.ton || 0}}吨</el-form-item>
        <el-form-item label="取消原因：" :label-width="formLabelWidth" prop="reason">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="formCancel.reason" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <div class="plan">为了避免造成用户无法加油的情况，取消订单前，请和用户联系，用户手机号码为：{{form.realCustomerPhone}}</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="close" @click="isShowOilConfirm = false" size="medium">关 闭</el-button>
        <el-button class="search-btn" type="primary" @click="submit('formCancel')" size="medium">确认取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reservationOrderCancel } from '@/api/order'
export default {
  data () {
    return {
      formLabelWidth: '130px',
      isShowOilConfirm: false,
      form: {},
      formCancel:{
        reason: '',
      },
      rules: {
        reason: [{ required: true, message: '取消原因不能为空！', trigger: 'change' }]
      }
    }
  },
  methods: {
    init (params) {
      this.isShowOilConfirm = true
      const { gasId, orderNo, deliveryDt, customerPhone, ton, unitPrice, realCustomerPhone } = params
      this.form = { gasId, orderNo, deliveryDt, customerPhone, ton, unitPrice, realCustomerPhone }
      this.formCancel.reason = ''
      this.$nextTick(()=>{
        this.$refs['formCancel'].clearValidate(['reason']); 
      })
    },
    // 提交
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        this.reservationOrderCancelApi({ orderNo: this.form.orderNo, reason: this.formCancel.reason })
      })
    },
    async reservationOrderCancelApi (params) {
      try {
        const { code } = await reservationOrderCancel(params)
        if(code !== 200) return
        this.$message.success('订单取消成功！')
        this.$emit('handleBtn')
      } catch (e) {
        console.log(e)
      } finally {
        this.isShowOilConfirm = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search-btn{
  background: #3669EB;
}
.close{
  background: #eeeeee;
}
.plan{
  padding: 0 35px;
  text-align: center;
  color: #E31937;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
</style>
